<template>
    <div class="SearchInput">
        <form>
            <el-input :placeholder="placeholder"
                      v-model="searchText"
                      :style="inputStyle"
                      class="input-with-select">
                <el-button slot="append"
                           icon="el-icon-search color-blue"
                           type=""
                           native-type="submit"
                           @click.native="$emit('click-search')"
                           :loading="loading"

                ><span class="color-blue">{{ buttonText }}</span>
                </el-button>
            </el-input>
        </form>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'

@Component({
  components: {}
})
export default class SearchInput extends Vue {
  @Prop({
    default: ''
  })
  readonly value!: any
  @Prop({
    default: '查找'
  })
  readonly buttonText!: any
  @Prop({
    default: '名称、接口地址'
  })
  readonly placeholder!: any
  @Prop({
    default: false
  })
  readonly loading!: any
  @Prop({
    default: '340px'
  })
  readonly width!: any
  searchText: any = this.value

  mounted() {
    this.reload()
  }

  reload() {}

  @Watch('searchText')
  onSearchTextChanged(v) {
    this.$emit('input', v)
  }

  get inputStyle() {
    return {
      width: this.width
    }
  }

}
</script>

<style lang="less" scoped>
    @import "~style/var.less";

    .SearchInput {
    }
</style>